<template>
  <!-- <el-button @click="submit">登录</el-button> -->
  <div class="card-container mx-auto my-0 flex max-w-[600px] flex-col rounded-none bg-white sm:my-4 sm:rounded-sm">
    <section id="password-login" class="page page-21" style="">
      <div class="card-pad">
        <div class="card-title">
          <div class="mobile-header" style="display: none"></div>
          <h2 class="sign-in-title hide-if-one-time-linking" title="Sign In">
            Sign In
          </h2>
        </div>
        <form class="form flex flex-col space-y-2" novalidate="">
          <div class="form__ttip flex flex-col space-y-1">
            <div class="flex items-center space-y-1">
              <label for="password-login-username">Email or username</label>
            </div>
            <div class="input-icon-container">
              <input type="email" id="password-login-username" class="username dj-input w-full" v-model="emailValue" />
            </div>
          </div>
          <div id="password-login-card-container" class="password-card-container">
            <div class="flex flex-col space-y-1">
              <label for="password-login-password">Password</label>
              <div class="input-icon-container">
                <input v-model="password" type="password" name="password" id="password-login-password"
                  class="password dj-input w-full pr-10" />
              </div>
              <div id="password-login-password-error" class="password-error input-error" style="display: none">
                Please enter your password
              </div>
            </div>
          </div>

          <div class="sign-in hide-if-one-time-linking">

            <el-button class="solid-button new-design basic-login-submit dj-btn-primary group w-full" @click="submit">
              <span class="group-[.loading]:hidden">Sign In</span>
            </el-button>
          </div>
          <div id="password-login-options-container" class="form__full mt-2 text-center">
            <div class="call-to-action flex flex-col space-y-2">
              <p id="internal-signin-all" class="align-center hide-if-one-time-linking">
                <span data-token="orLabel">For limited access, create a free registration account</span>
                <button type="button" id="return-to-sign-in" class="client-aware dj-link">
                  <router-link to="singin">
                     here
                  </router-link>
                  
                </button>
              </p>
            </div>
          </div>
        </form>
      </div>
    </section>
  </div>

</template>

<script setup>
import loginRequest from "@/api/login.js";
import { setStorage } from "@/utils/index";
import { useRouter } from "vue-router";
import { useUserStore } from '@/store/user.js';
const userInfoStore = useUserStore();
const router = useRouter();
import './login.css';
// 使用 ref 创建一个响应式引用  
const emailValue = ref('');
const password = ref('');
function clearValueData() {
  emailValue.value = '';
  password.value = '';
}
onMounted(() => {


});
function watch() {
  //TODO:关注列表
  loginRequest
    .watchList({})
    .then((res) => {
      if (res.code == "0") {
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
//TODO:登录
function submit() {
  let data = {
    email: emailValue.value,
    password: password.value,
  };
  loginRequest
    .login(data)
    .then((res) => {
      if (res.code == "0") {
        setStorage("spToken", res.data);
        userInfoStore.setUserToken(res.data)
        // 清空输入框的值
        clearValueData();
        getUserName()
        router.push("/index");
        watch()
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
//  获取用户名
const getUserName = () => {
  loginRequest.getUserData({})
    .then((res) => {
      if (res.code === 0) {
        setStorage('userName', res.data.userName)
        userInfoStore.setUserName(res.data.userName)
      }
    })
}
//获取返回每个tab字段的数据
// const getMdList = () => {
//   loginRequest.getMdTab({})
//     .then((res) => {
//       if (res.code === 0) {
//         userInfoStore.setMdTab(res.data)
//       }
//     })
// }
</script>

<style scoped>
element.style {
    display: none;
}
.text-center {
    text-align: center;
}
.mb-4 {
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .card-pad {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

.card-pad {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.card-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1rem;
    text-align: center;
}
.card-container {
  margin-top: 90px;
}

.input-icon-container {
  border: 1px solid rgb(179, 179, 179);
}
.card-container[data-v-662b2597] {
    margin-top: 90px;
}

@media (min-width: 640px) {
    .sm\:rounded-sm {
        border-radius: .125rem;
    }
}

@media (min-width: 640px) {
    .sm\:my-4 {
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
}


.bg-white {
    --tw-bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.rounded-none {
    border-radius: 0;
}

.flex-col {
    flex-direction: column;
}

.max-w-\[600px\] {
    max-width: 600px;
}

.flex {
    display: flex;
}

.my-0 {
    margin-bottom: 0;
    margin-top: 0;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
</style>